<template>
  <div class="container-content">
    <div class="container-group">
        <div class="top-title">
            <div class="title">数据概况</div>
            <div class="date-right">
                <el-radio-group v-model="param.payType" >
                    <el-radio-button label="">全部</el-radio-button>
                    <el-radio-button label="POINT_GOLD">红包订单</el-radio-button>
                    <!-- <el-radio-button label="POINT_SILVER">银豆订单</el-radio-button> -->
                </el-radio-group>
                 <el-date-picker
                    v-model="dateArr"
                    type="daterange"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                >
                </el-date-picker>
                <el-button
                    type="primary"
                    size="mini"
                    icon="el-icon-search"
                    @click="getList"
                    >查询</el-button>
            </div>
        </div>
        <div class="top-wrap">
            <div class="top-list">
                <div class="list-wrap">
                    <div class="icon-list">
                        <i class="el-icon-shopping-cart-full"></i>
                    </div>
                    <div class="num">{{listObj.totalOrderCount}}</div>
                    <div class="name">累计兑换单数</div>
                    <el-button
                    size="mini"
                    @click="linkToT('orderList')"
                    >查看详情</el-button>
                </div>
            </div>
            <div class="top-list">
                <div class="list-wrap">
                    <div class="icon-list">
                        <i class="el-icon-shopping-cart-full"></i>
                    </div>
                    <div class="num">{{listObj.actionOrderCount}}</div>
                    <div class="name">累计激活订单数</div>
                    <el-button
                    size="mini"
                     @click="linkToT('rmbOrderList')"
                    >查看详情</el-button>
                </div>
            </div>
            <div class="top-list">
                <div class="list-wrap">
                    <div class="icon-list">
                        <i class="el-icon-bank-card"></i>
                    </div>
                    <div class="num">{{listObj.actionOrderPrice}}</div>
                    <div class="name">累计激活订单金额</div>
                    <el-button
                    size="mini"
                     @click="linkToT('rmbOrderList')"
                    >查看详情</el-button>
                </div>
            </div>
            <div class="top-list">
                <div class="list-wrap">
                    <div class="icon-list">
                        <i class="el-icon-bank-card"></i>
                    </div>
                    <div class="num">{{listObj.totalOrderPrice}}</div>
                    <div class="name">累计兑换订单数金额</div>
                    <el-button
                    size="mini"
                    @click="linkToT('orderList')"
                    >查看详情</el-button>
                </div>
            </div>
            <div class="top-list">
                <div class="list-wrap">
                    <div class="icon-list">
                        <i class="el-icon-user"></i>
                    </div>
                    
                    <div class="num">{{listObj.userCount}}</div>
                    <div class="name">累计用户数</div>
                    <el-button
                    size="mini"
                     @click="linkToT('userList')"
                    >查看详情</el-button>
                </div>
            </div>
        </div>
    </div>
    <div class="container-bottom">
        <div class="container-bottom-left">
             <div class="title">今日数据</div>
             <div style="overflow:hidden">
                    <el-radio-group v-model="payType" style="margin-bottom: 30px;">
                        <el-radio-button label="">全部</el-radio-button>
                        <el-radio-button label="POINT_GOLD">红包订单</el-radio-button>
                        <!-- <el-radio-button label="POINT_SILVER">银豆订单</el-radio-button> -->
                    </el-radio-group>
            </div>
            <div class="menu-item">
                <div @click="linkToT('orderList')" class="menu-list">
                    <div class="icon-wrap">
                        <i class="el-icon-bank-card"></i>
                    </div>
                    <div class="nums">{{dataObj.totalOrderCount}}</div>
                    <div class="title-name">兑换订单数</div>
                </div>
                <div @click="linkToT('rmbOrderList')" class="menu-list">
                    <div class="icon-wrap">
                        <i class="el-icon-bank-card"></i>
                    </div>
                    <div class="nums">{{dataObj.actionOrderCount}}</div>
                    <div class="title-name">激活订单数</div>
                </div>
                <div @click="linkToT('orderList')" class="menu-list">
                    <div class="icon-wrap">
                        <i class="el-icon-truck"></i>
                    </div>
                    <div class="nums">{{dataObj.waitSendOrderCount}}</div>
                    <div class="title-name">待发货订单</div>
                </div>
                <div  @click="linkToT('userList')"  class="menu-list">
                    <div class="icon-wrap">
                        <i class="el-icon-user"></i>
                    </div>
                    <div class="nums">{{dataObj.userCount}}</div>
                    <div class="title-name">今日新增用户</div>
                </div>
            </div>
        </div>
        <div class="container-bottom-right">
            <div class="title">最近订单</div>
            <div class="table-wrap">
                <el-table
                    v-loading="loading"
                    :data="tableData"
                    @cell-click="cellClick"
                >
                    <el-table-column
                    prop="gmtCreated"
                    label="创单时间"
                    >  
                    </el-table-column>
                    <el-table-column
                    width="200"
                    prop="orderCode"
                    label="订单编号"   
                    >
                    </el-table-column>
                    <el-table-column
                    prop="plateCode"
                    label="商品标题"   
                    >
                     <template slot-scope="scope">
                          <div :title="scope.row.orderItems[0].productTitle" class="name-table">{{scope.row.orderItems[0].productTitle}}</div>
                    </template>
                    
                    </el-table-column>
                    <el-table-column
                    prop="plateCode"
                    label="数量"   
                    >
                    <template slot-scope="scope">
                        {{scope.row.orderItems[0].count}}
                    </template>
                    </el-table-column>
                    <el-table-column
                    prop="costPrice"
                    label="订单金额"   
                    >
                    </el-table-column>
                    <el-table-column
                    prop="plateCode"
                    label="订单状态"   
                    >
                        <template slot-scope="scope">
                            {{returnState(scope.row.orderStatus)}}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
let CONSTANT = require("../../constant/constant.js");
let common = require("../../common.js");
export default {
  data() {
    return {
      tabPosition:'',
      payType:'',
      dataObj:{},
      dateArr:[],
      listObj:{},
      loading:false,
      tableData:[],
     statusList: [{
          label: "全部",
          value: "",
        },{
          label: "已付款",
          value: "WAIT_SEND",
        },{
          label: "未付款",
          value: "WAIT_PAY",
        },{
          label: "待收货",
          value: "WAIT_GET",
        },{
          label: "待评价",
          value: "EVALUATION",
        },{
          label: "超时取消",
          value: "CANCEL_TIMEOUT",
        },
         {
           label: "已完成",
           value: "COMPLETED",
         }
        ],
      param:{
        "endTime": "",
        "payType": '',
        "startTime": ""
      }
    };
  },
  watch:{
      'payType':function(val){
          this.getInfo()
      },
      'param.payType':function(val){
          this.getList()
      },
  },
  mounted() {
     this.getInfo()
     this.getList()
     this.getOrderList()
  },
  methods: {
    cellClick(val){
        this.$router.push('/orderDetail?orderCode='+val.orderCode)
    },
    getOrderList: function() {
         let url = CONSTANT.URL.ORDER.orderList;
        this.loading = true;
        common.post(url, {
          pageIndex: 1,
          pageSize: 6
        }, res => {
          this.loading = false;
          let data = res.data;
          this.tableData = data.bussData;
        });
      },
    getList: function() {
        if (this.dateArr&&this.dateArr.length) {
            this.param.startTime = this.dateArr[0]
            this.param.endTime = this.dateArr[1]
        }else{
            this.dateArr = []
            this.param.startTime = ''
            this.param.endTime = ''
        }
        let url = `${CONSTANT.URL.ORDER.statistics}`;
        common.postw(url,this.param, res => {
            this.listObj = res.data.bussData;
        });
    },
    linkToT(path){
        this.$router.push(path)
    },
    returnState(id){
        let str;
        this.statusList.map(item=>{
          if(id==item.value){
            str = item.label
          }
        })
        return str
      },
    getInfo: function() {
      let url = `${CONSTANT.URL.ORDER.statisticstoday}?payType=${this.payType}`;
      common.post(url,'', res => {
        this.dataObj = res.data.bussData;
      });
    },
  },
  filters: {
  }
};
</script>
<style lang="scss">
 .container-content{
    .container-group{
        background-color: #fff;
        padding: 20px 20px;
        .top-title{
            display: flex;
            justify-content: space-between;
            .title{
                font-size: 24px;
            }
            .date-right{
                display: flex;
                align-items: center;
                .el-radio-group{
                    margin-right: 20px;
                }
                .el-date-editor{
                    margin-right: 10px;
                }
                .el-radio-button__inner{
                    padding: 10px 12px!important;
                }
            }
        }
        .top-wrap{
            display: flex;
            margin-top: 20px;
            .top-list{
                flex: 1;
                .list-wrap{
                    width: 168px;
                    height: 202px;
                    margin: 0 auto;
                    border: 1px solid #ddd;
                    text-align: center;
                    .icon-list{
                        width: 60px;
                        height: 60px;
                        border-radius: 50%;
                        text-align: center;
                        line-height: 65px;
                        margin: 10px auto 5px;
                        border: 1px solid #ddd;
                        
                    }
                    .num{
                        font-size: 30px;
                    }
                    .name{
                        font-size: 14px;
                        margin-bottom: 20px;
                        margin-top: 5px;
                    }
          
                    i{
                        font-size: 24px;
                    }
                }
            }
        }
    }
    .container-bottom{
        .title{
            font-size: 24px;
        }
        margin-top: 20px;
        overflow: hidden;
        .container-bottom-left{
            float: left;
            background-color: #fff;
            width: 33%;
            box-sizing: border-box;
            padding: 20px 20px;
            .el-radio-group{
                float: right;
                margin-top: 10px;
            }
            .el-radio-button__inner{
                padding: 10px 12px!important;
            }
            .menu-item{
                overflow: hidden;
                .menu-list{
                    width: 50%;
                    float: left;
                    text-align: center;
                    margin-bottom: 20px;
                    cursor: pointer;
                    .icon-wrap{
                        width: 70px;
                        height: 70px;
                        border-radius: 50%;
                        text-align: center;
                        line-height: 70px;
                        border: 1px solid #ddd;
                        margin: 0 auto 5px;
                        i{
                            font-size: 24px;
                        }
                    }
                    .nums{
                        font-size: 23px;
                    }
                    .title-name{
                        font-size: 14px;
                    }
                }
            }
        }
        .container-bottom-right{
            padding: 20px 20px;
            box-sizing: border-box;
            float: left;
            width: 66%;
            background-color: #fff;
            margin-left: 1%;
            min-height: 450px;
            .table-wrap{
                margin-top: 20px;
                .cell{
                    color: #606266;
                    font-size: 14px;
                }
            }
        }
    }
 }
</style>
